<template>
    <el-container class="login-view">
        <el-container>
            <el-aside class="aside">
                <h2 class="project-name">项目管理小工具</h2>
                <el-form ref="form" :model="form" label-width="0.5rem" class="login-form">
                    <h1>
                        Login
                    </h1>
                    <el-form-item label="账户" prop="userName">
                        <el-input v-model="form.userName"></el-input>
                    </el-form-item>
                    <el-form-item label="密码" prop="password">
                        <el-input type="password" v-model="form.password"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button class="btn-login" icon="el-icon-right" type="warn" @click="login" circle></el-button>
                    </el-form-item>
                </el-form>
            </el-aside>
            <el-container>
                <el-main class="main">
                    <div class="main-title">
                        <h1 :class="animationClassName">让项目，更有效率。</h1>
                    </div>
                </el-main>
                <el-footer class="footer">
                    <h1>author: lanhui</h1>
                </el-footer>
            </el-container>
        </el-container>
    </el-container>
</template>
<script>
    export default {
        name: 'Login',
        data() {
            return {
                animationClassName: '',
                form: {
                    userName: '',
                    password: ''
                }
            }
        },
        mounted: function () {
            this.triggerAnimation();
        },
        methods: {
            login: function () {
                this.$router.push('/home');
            },
            triggerAnimation() {
                this.animationClassName = 'myfirst-enter-active';
            }
        }
    }
</script>
<style lang="scss" scoped>
    @import "@/assets/scss/var.scss";

    @keyframes myfirst {
        0% {
            color: $dark-main-color;
        }
        50% {
            color: $light-main-color;
        }
        100% {
            color: $dark-main-color;
        }
    }

    @-moz-keyframes myfirst /* Firefox */
    {
        0% {
            color: $dark-main-color;
        }
        50% {
            color: $light-main-color;
        }
        100% {
            color: $dark-main-color;
        }
    }

    @-webkit-keyframes myfirst /* Safari 和 Chrome */
    {
        0% {
            color: $dark-main-color;
        }
        50% {
            color: $light-main-color;
        }
        100% {
            color: $dark-main-color;
        }
    }

    @-o-keyframes myfirst /* Opera */
    {
        0% {
            color: $dark-main-color;
        }
        50% {
            color: $light-main-color;
        }
        100% {
            color: $dark-main-color;
        }
    }

    .myfirst-enter-active {
        animation: myfirst 20s ease 0s infinite normal;
    }

    .login-view {
        width: 100%;
        height: 100%;
        background: $dark-main-color;
        font-size: 0.14rem;

        .aside {
            height: 100%;
            /*background: #6595ba80;*/
            background: #c3d7df70;

            .project-name {
                margin: 0.1rem;
                color: #215379;
                /*background: #ffefde;*/
                /*color: $light-main-color;*/
                text-align: center;
            }

            .login-form {
                margin: 0 0.1rem;
                padding: 0 0.3rem 0.2rem 0.2rem;
                background: #144a74;
                border-radius: 0.1rem;

                h1 {
                    font-size: 0.5rem;
                    color: $light-main-color;
                    font-weight: 100;
                }
                .btn-login {
                    float: right;
                }
            }
        }

        .main {
            color: $light-main-color;

            .main-title {
                text-align: right;

                h1 {
                    font-size: 1.2rem;
                    -webkit-box-reflect: below 0 -webkit-linear-gradient(transparent, transparent 20%, rgba(255, 255, 255, .5));
                    box-reflect: below 0 linear-gradient(transparent, transparent 50%, rgba(255, 255, 255, .3));
                    font: bold 100px/1.231 georgia, sans-serif;
                }
            }

        }

        .footer {
            color: #ffffff;
            h1 {
                text-align: right;
                margin-right: 0.6rem;
            }
        }
    }
</style>
<style lang="scss">
    .login-view {
        .el-form {
            .el-form-item__label {
                color: #f7e8aa;
            }

            .el-input__inner {
                background: #ffffff50;
                color: #154974;
            }
        }
    }
</style>
